<template>
	<view class="head">
		<view class="head-placeholder"></view>

		<!-- 上部分 -->
		<view class="user">
			<image class="user-portrait" :src="userinfo.avatarUrl"></image>
			<view class="user-nickname">
				{{userinfo.nickName}}
			</view>
			<view class="user-icon">
				<image src="../../static/Membership code.png" style="width: 45px; height: 45px;"></image>
				<image src="../../static/setup.png" style="width: 50px; height: 50px;"></image>
				<image src="../../static/information.png" style="width: 45px; height: 45px;"></image>
			</view>
		</view>

		<!-- 中部分 -->
		<view class="center-part">
			<view class="center-part-A">
				<view class="center-part-A-1">新人专享</view>
				<view class="center-part-A-2">领199元大礼包</view>
			</view>
			<view class="a-third-party-A"></view>
			<view class="center-part-B">
				<image src="../../static/red packet.png" class="center-part-B-1"></image>
				<image src="../../static/mobile phone.png" class="center-part-B-1"></image>
				<image src="../../static/laundry detergent.png" class="center-part-B-1"></image>
				<image src="../../static/toilet paper.png" class="center-part-B-1"></image>
			</view>
		</view>

		<!-- 下部分 -->
		<view class="below-part">
			<view class="below-part-A">
				<image src="../../static/diamond.png" class="below-part-A-1"></image>
				<view class="below-part-A-2">云钻</view>
				<view class="below-part-A-3">0</view>
				<view class="below-part-A-4"></view>
				<image src="../../static/attention.png" class="below-part-A-1"></image>
				<view class="below-part-A-2">关注</view>
				<view class="below-part-A-3">0</view>
				<view class="below-part-A-4"></view>
				<image src="../../static/footprint.png" class="below-part-A-1"></image>
				<view class="below-part-A-2">足迹</view>
				<view class="below-part-A-3">0</view>
				<view class="below-part-A-4"></view>
				<image src="../../static/shopping bag.png" class="below-part-A-1"></image>
				<view class="below-part-A-2">常购</view>
			</view>
			<view class="below-part-B">
				<view class="below-part-B-1">我的订单</view>
				<view class="below-part-B-2">查看全部</view>
				<view class="below-part-B-3">></view>
			</view>
			<view class="below-part-C">
				<view class="below-part-C-1">
					<image src="../../static/unpaid.png" class="below-part-C-1-1"></image>
					<image src="../../static/wait for receiving.png" class="below-part-C-1-1"></image>
					<image src="../../static/Evaluation courtesy.png" class="below-part-C-1-1"></image>
					<image src="../../static/My invoice.png" class="below-part-C-1-1"></image>
				</view>
				<view class="below-part-C-2">
					<view class="below-part-C-2-1">待收货</view>
					<view class="below-part-C-2-1">待支付</view>
					<view class="below-part-C-2-1">评价有礼</view>
					<view class="below-part-C-2-1">我的发票</view>
				</view>

			</view>
		</view>

		<!-- 末端部分 -->
		<view class="fine-part">
			<view class="fine-part-A">
				<view class="fine-part-A-1">我的订阅</view>
				<view class="fine-part-A-2">(金额资产)</view>
				<view class="fine-part-A-3">></view>
			</view>
			<view class="fine-part-B">
				<image src="../../static/fund sources.png" class="fine-part-B-1"></image>
				<view class="fine-part-B-2">5W</view>
				<view class="fine-part-B-2">20W</view>
				<view class="fine-part-B-2">6.0%</view>
			</view>
			<view class="fine-part-C">
				<view class="fine-part-C-1">
					<view class="fine-part-C-1-1">支付新客</view>
					<view class="fine-part-C-1-1">任性付</view>
					<view class="fine-part-C-1-1">任性贷</view>
					<view class="fine-part-C-1-1">零钱包</view>
				</view>
				<view class="fine-part-C-2">
					<view class="fine-part-C-2-1">15元话费</view>
					<view class="fine-part-C-2-1">30.01减30</view>
					<view class="fine-part-C-2-1">30天免息</view>
					<view class="fine-part-C-2-1">新用户专享</view>
				</view>
			</view>
		</view>

		<!-- 退出登录部分 -->
		<view class="log-out" @click="logout">
			<text class="log-out-1">退出登录</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		name: "my-info",
		data() {
			return {

			};
		},
		// 获取所登录的头像昵称
		computed: {
			...mapState("m_user", ["userinfo"])
		},
		methods: {
			async logout() {
				const [err, res] = await uni.showModal({
					content: "是否退出当前登录"
				})
				if (res.confirm) {
					this.$store.commit("m_user/logout", "")
				}
			}
		}
	}
</script>

<style lang="scss">
	.head {
		width: 100%;
		height: 650rpx;
		background-color: #ececec;

		.head-placeholder {
			width: 100%;
			height: 20px;
		}

		.user {
			display: flex;
			width: 100%;

			.user-portrait {
				width: 75px;
				height: 75px;
				object-fit: cover;
				border-radius: 50%;

			}

			.user-nickname {
				font-size: 25px;
				color: #000;
				display: flex;
				align-items: center;
			}

			.user-icon {
				flex: 1;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				margin-left: 90rpx;
			}
		}

		.center-part {
			margin-top: 40rpx;
			width: 100%;
			height: 300rpx;
			background-color: #FFF0F5;
			object-fit: cover;
			border-radius: 5%;

			.center-part-A {
				display: flex;

				.center-part-A-1 {
					color: red;
					font-size: 30px;
					font-weight: bold;
				}

				.center-part-A-2 {
					color: red;
					font-size: 20px;
					font-weight: 300;
					margin-top: 28rpx;
					margin-left: 30rpx;
				}
			}

			.a-third-party-A {
				height: 15rpx;
			}

			.center-part-B {
				display: flex;
				justify-content: space-around;

				.center-part-B-1 {
					width: 180rpx;
					height: 180rpx;
					object-fit: cover;
					border-radius: 5%;
				}
			}
		}

		.below-part {
			margin-top: 40rpx;
			width: 100%;
			height: 450rpx;
			background-color: white;
			object-fit: cover;
			border-radius: 5%;

			.below-part-A {
				// background-color: #55ffff;
				width: 100%;
				height: 125rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.below-part-A-1 {
					width: 60rpx;
					height: 60rpx;
				}

				.below-part-A-2 {
					font-size: 38rpx;
					font-family: "微软雅黑", sans-serif;
				}

				.below-part-A-3 {
					font-size: 35rpx;
					font-family: "微软雅黑", sans-serif;
				}

				.below-part-A-4 {
					width: 5rpx;
					height: 55rpx;
					background-color: #666666;
				}
			}

			.below-part-B {
				width: 100%;
				height: 125rpx;
				display: flex;
				// background-color: blue;

				.below-part-B-1 {
					font-size: 50rpx;
					flex: 3;
					display: flex;
					align-items: center;
				}

				.below-part-B-2 {
					color: #9f9f9f;
					font-size: 35rpx;
					flex: 1;
					display: flex;
					align-items: center;
				}

				.below-part-B-3 {
					color: #9f9f9f;
					font-size: 50rpx;
					display: flex;
					align-items: center;
				}
			}

			.below-part-C {
				width: 100%;
				height: 200rpx;
				// background-color: blueviolet;
				display: flex;
				flex-direction: column;

				.below-part-C-1 {
					display: flex;
					justify-content: space-around;

					.below-part-C-1-1 {
						width: 100rpx;
						height: 100rpx;
					}
				}

				.below-part-C-2 {
					display: flex;
					justify-content: space-around;

					.below-part-C-2-1 {
						font-size: 40rpx;
						color: #9f9f9f;
					}
				}
			}
		}

		.fine-part {
			width: 100%;
			height: 320rpx;

			.fine-part-A {
				display: flex;

				.fine-part-A-1 {
					font-size: 50rpx;
					flex: 1;
					display: flex;
					align-items: center;
				}

				.fine-part-A-2 {
					color: #9f9f9f;
					font-size: 35rpx;
					flex: 2;
					display: flex;
					align-items: center;
				}

				.fine-part-A-3 {
					color: #9f9f9f;
					font-size: 50rpx;
				}
			}

			.fine-part-B {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.fine-part-B-1 {
					width: 100rpx;
					height: 100rpx;
				}

				.fine-part-B-2 {
					font-size: 45rpx;
				}
			}

			.fine-part-C {
				display: flex;
				flex-direction: column;

				.fine-part-C-1 {
					display: flex;
					justify-content: space-around;

					.fine-part-C-1-1 {
						font-size: 45rpx;
					}
				}

				.fine-part-C-2 {
					display: flex;
					justify-content: space-around;

					.fine-part-C-2-1 {
						font-size: 35rpx;
						color: #b9b9b9;
					}
				}
			}
		}

		.log-out {
			width: 100%;
			height: 100rpx;
			background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;

			.log-out-1 {
				font-size: 50rpx;
			}
		}
	}
</style>